<template>
  <!-- 课题选择界面 -->
  <div>
    <div class="content">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="课题" width="250">
          <template slot-scope="scope">
            <router-link
              :to="{ path: '/topic', query: { id: scope.row.id } }"
              >{{ scope.row.topic_name }}</router-link
            >
          </template>
        </el-table-column>
        <el-table-column label="课题来源" width="180">
          <template slot-scope="scope">
            <p>{{ scope.row.topic_from }}</p>
          </template>
        </el-table-column>
        <el-table-column label="课题类型" width="180">
          <template slot-scope="scope">
            <p>{{ scope.row.topic_type }}</p>
          </template>
        </el-table-column>
        <el-table-column label="教师" width="180">
          <template slot-scope="scope">
            <a
              href="javascript:;"
              @click="cheack_teacher(scope.row.teacher_tid)"
              >{{ scope.row.teacher_name }}</a
            >
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >选择</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 教师信息弹出框 -->
    <el-dialog title="教师信息" :visible.sync="dialogVisible" width="30%">
      <el-descriptions class="margin-top" :column="1" border>
        <el-descriptions-item>
          <template slot="label"> 姓名 </template>
          {{ teacher.teacher_name }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 所属学院 </template>
          {{ teacher.teacher_college }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 学位 </template>
          {{ teacher.teacher_degree }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 电话 </template>
          {{ teacher.teacher_phone }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 邮箱 </template>
          {{ teacher.teacher_email }}
        </el-descriptions-item>
      </el-descriptions>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- 分页 -->
    <div class="block">
      <el-pagination
        background
        :current-page="querinfo.current"
        :page-size="querinfo.limit"
        layout="prev, pager, next"
        :total="total"
        @current-change="currentChange"
        @prev-click="prevClick"
        @next-click="nextClick"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  created() {
    this.getAllTopic();
  },
  data() {
    return {
      // topic: [{ name: "", from: "", type: "", teacher_name: "" }],
      teacher: {},
      tableData: [],
      querinfo: {
        limit: 5,
        current: 1,
      },
      dialogVisible: false,
      total: null,
    };
  },
  methods: {
    getAllTopic() {
      this.$http
        .get("http://127.0.0.1:8080/my/getAllTopic", { params: this.querinfo })
        .then((res) => {
          // console.log(res);
          if (res.status == 1) return;
          this.total = res.data.data.total;
          this.tableData = res.data.data.datalist;
        })
        .catch((err) => {
          // this.$message.error(err);
        });
    },

    cheack_teacher(id) {
      console.log(id);
      this.dialogVisible = true;
      this.$http
        .get("http://127.0.0.1:8080/my/teacherinfo?id=" + id)
        .then((res) => {
          if (res.data.status == 0) {
            this.teacher = res.data.data[0];
            // console.log(res);
          } else {
            this.$message.error(res.data.message);
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },

    // 点击页码跳转
    currentChange(val) {
      this.querinfo.current = val;
      this.getAllTopic();
    },

    // 上一页按钮
    prevClick(val) {
      // console.log(val);
      this.querinfo.current = val;
      this.getAllTopic();
    },

    // 下一页按钮
    nextClick(val) {
      this.querinfo.current = val;
      this.getAllTopic();
    },

    // 选择按钮
    handleEdit(index, row) {
      // console.log(index, row);
      this.$http
        .post("http://127.0.0.1:8080/my/choosebtn", this.$qs.stringify(row))
        .then((res) => {
          // console.log(res);
          if (res.data.status == 0) {
            this.$message.success(res.data.message);
            this.getAllTopic();
          } else {
            this.$message.error(res.data.message);
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
  },
};
</script>
<style lang="less" scoped>
.block {
  position: fixed;
  left: 50%;
  top: 83%;
}
</style>
